<template>
  <div>
    <!-- 编辑任务 -->
    <div class="box-shadow">
      <el-form
        :model="addParams"
        ref="addRef"
        :rules="formRules"
        size="small"
        :inline="true"
        label-width="135px"
      >
        <div class="base-info">
          <div class="title-common">
            1&nbsp;&nbsp;&nbsp;{{ $t("基本信息") }}
            <div class="radiu"></div>
          </div>
          <el-row>
            <el-col :span="6" :xs="24">
              <el-form-item
                prop="name"
                :label="$t('任务模板名称') + '：'"
                label-width="186px"
              >
                <el-input
                  v-model="addParams.name"
                  :placeholder="$t('请输入')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <span>{{ $t("所属地图") + "：" }}</span>
              <span>{{ mapId }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="inspect-info">
          <div class="title-common">
            2&nbsp;&nbsp;&nbsp;{{ $t("巡检信息") }}
            <div class="radiu"></div>
          </div>
          <el-row>
            <el-col :span="addParams.overType == '4' ? 6 : 8" :xs="24">
              <el-form-item prop="viewType" :label="$t('巡检类型') + '：'"
                ><el-select
                  v-model="addParams.viewType"
                  :placeholder="$t('请选择')"
                >
                  <el-option
                    v-for="dict in dict.type.viewType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="addParams.overType == '4' ? 6 : 8" :xs="24">
              <el-form-item prop="overType" :label="$t('结束动作') + ':'">
                <el-select
                  v-model="addParams.overType"
                  :placeholder="$t('请选择')"
                >
                  <el-option
                    v-for="dict in dict.type.overType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="addParams.overType == '4' ? 6 : 8"
              v-if="addParams.overType == '4'"
            >
              <el-form-item
                prop="overStopPoint"
                :rules="
                  addParams.overType == '4' ? formRules.overStopPoint : []
                "
              >
                <el-input
                  v-model="addParams.overStopPoint"
                  autocomplete="off"
                  :placeholder="$t('请输入停靠点位置')"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="addParams.overType == '4' ? 6 : 8" :xs="24">
              <el-form-item prop="dimension" :label="$t('巡检维度') + ':'">
                <el-radio-group
                  v-model="addParams.dimension"
                  @change="treeNodeChange"
                >
                  <el-radio label="1">{{ $t("巡检对象维度") }}</el-radio>
                  <!-- <el-radio label="2">{{ $t("巡检点维度") }}</el-radio> -->
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6" :xs="24">
              <el-form-item prop="priority" label="优先级：">
                <el-select v-model="addParams.priority" placeholder="请选择">
                  <el-option
                    v-for="priority in priorityList"
                    :key="priority.value"
                    :label="priority.label"
                    :value="priority.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
        </div>
        <el-row :gutter="20" class="fixed-point">
          <el-col :span="8" :xs="24" class="tree">
            <div class="title-common">
              3&nbsp;&nbsp;&nbsp;{{ $t("定点巡检") }}
              <div class="radiu"></div>
            </div>
            <el-row>
              <el-form-item
                prop="patrolPathType"
                :label="$t('巡检路径') + '：'"
              >
                <el-radio-group
                  v-model="addParams.patrolPathType"
                  text-color="#00D1FF"
                  fill="#00D1FF"
                  @change="patrolPathTypeChange"
                >
                  <el-radio label="1">{{ $t("最优路径") }}</el-radio>
                  <el-radio label="2">{{ $t("勾选顺序") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                label-width="179px"
                v-if="showTree"
                :rules="addParams.dimension == '1' ? formRules.objTreeList : []"
                prop="objTreeList"
                :label="$t('选择巡检对象')"
              >
                <el-tree
                  :data="deptOptions"
                  node-key="treeId"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  show-checkbox
                  ref="objTreeRef"
                  class="scroll-hidden"
                  default-expand-all
                  @node-click="nodeClick($event, 'obj')"
                  @check-change="
                    (item, isChecked) =>
                      sortCheckedChange(item, isChecked, 'obj')
                  "
                >
                  <span
                    slot-scope="{ node, data }"
                    style="display: inline-block; width: 100%"
                    :style="
                      data.treeId == currentTreeId
                        ? 'background-color:rgba(0, 209, 255, 0.2)'
                        : ''
                    "
                  >
                    <img
                      :src="objIcons[data.iconType]"
                      style="width: 16px; height: 16px"
                    />
                    <span
                      style="margin-left: 10px"
                      :style="{
                        color:
                          (data.type == '2' || data.type == '3') &&
                          data.isParam == '0'
                            ? '#FF5562'
                            : '#FFFFFF',
                      }"
                      :title="data.name"
                      >{{ data.name }}</span
                    >
                    <span style="display: inline-block; width: 40px"></span>
                    <template v-if="addParams.patrolPathType == '2'">
                      <span
                        v-for="(item, index) in checkedObj"
                        :key="index"
                        style="display: inline-block"
                        ><span v-if="item.treeId == data.treeId">{{
                          index + 1
                        }}</span></span
                      >
                    </template>
                  </span>
                </el-tree>
                <el-row class="obj-text"
                  >{{
                    $t(
                      "注1红色图标代表未绑定巡检点请在QT工具上绑定虚拟对象无需绑定"
                    )
                  }}<br />
                  {{ $t("注2红色文字代表未填写对象参数请在QT工具上填写")
                  }}<br />
                  {{
                    $t(
                      "注3以上两类异常的巡检对象将无法正常巡检暂不支持勾选下发巡检任务"
                    )
                  }}</el-row
                >
              </el-form-item>
              <el-form-item
                label-width="179px"
                v-if="showPoint"
                :rules="
                  addParams.dimension == '2' ? formRules.pointTreeList : []
                "
                prop="pointTreeList"
                :label="$t('选择巡检点')"
              >
                <el-tree
                  :data="pointsList"
                  ref="pointTreeRef"
                  class="point-tree scroll-hidden"
                  node-key="id"
                  show-checkbox
                  :props="pointDefaultProps"
                  default-expand-all
                  @node-click="nodeClick($event, 'point')"
                  @check-change="
                    (item, isChecked) =>
                      sortCheckedChange(item, isChecked, 'point')
                  "
                >
                  <span
                    slot-scope="{ node, data }"
                    style="display: inline-block; width: 100%"
                    :style="
                      data.id == currentTreeId
                        ? 'background-color:rgba(0, 209, 255, 0.2)'
                        : ''
                    "
                  >
                    <img
                      :src="pointsIcons[data.iconType]"
                      style="width: 16px; height: 16px"
                    />
                    <span
                      style="margin-left: 10px"
                      :style="{
                        color:
                          (data.type == '2' || data.type == '3') &&
                          data.isParam == '0'
                            ? '#FF5562'
                            : '#FFFFFF',
                      }"
                      :title="data.name"
                      >{{ data.name }}</span
                    >
                    <span style="display: inline-block; width: 40px"></span>
                    <template v-if="addParams.patrolPathType == '2'">
                      <span
                        v-for="(item, index) in checkedObj"
                        :key="index"
                        style="display: inline-block"
                        ><span v-if="data.type == '1' && item.id == data.id">{{
                          index + 1
                        }}</span></span
                      >
                    </template>
                  </span>
                </el-tree>
                <el-row class="obj-text"
                  >{{ $t("注1该处仅展示已绑定巡检点的巡检对象") }}<br />
                  {{ $t("注2红色文字代表未填写对象参数请在QT工具上填写")
                  }}<br />
                  {{
                    $t(
                      "注3以上异常的巡检对象将无法正常巡检不会下发到巡检任务中"
                    )
                  }}</el-row
                >
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="16" :xs="24" class="imgs-preview">
            <div class="title-common">{{ $t("巡检对象预览") }}</div>
            <span>{{ $t("当前巡检对象巡检对象名称") }}</span>
            <div class="tabs">
              <div
                :class="['camero', currentTab == '1' ? 'current-tab' : '']"
                @click="tabClick('1')"
              >
                {{ $t("可见光") }}
              </div>
              <div
                :class="['hot', currentTab == '2' ? 'current-tab' : '']"
                @click="tabClick('2')"
              >
                {{ $t("热成像") }}
              </div>
              <div
                v-show="canvasImg"
                :class="[
                  'img',
                  currentTab == '1' || currentTab == '2' ? 'current-img' : '',
                ]"
              >
                <canvas ref="canvasImg" class="canvasImg">
                  {{ $t("浏览器版本过低请去下载最新版本浏览器") }}
                </canvas>
                <div class="info">
                  <div>{{ $t("巡检点") }}{{ pointName || $t("暂无") }}</div>
                  <div>0：{{ deviceName || $t("暂无") }}</div>
                </div>
              </div>
              <div
                class="img"
                v-show="imgss"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 19px;
                "
              >
                {{ $t("请在左侧点击某一巡检点进行预览查看") }}
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <div @click="submitBtn" class="serch-btn cursor-pointer">
        {{ $t("确定") }}
      </div>
      <div @click="cancleBtn" class="reset-btn cursor-pointer">
        {{ $t("取消") }}
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { API_treeOption } from "@/api/data/objData";
import {
  API_pointsList,
  API_getImgUrl,
  API_templateInfo,
  API_editTemplate,
} from "@/api/task/template";
export default {
  dicts: ["viewType", "overType", "dimension"],
  data() {
    var stopPointOneValid = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("请输入正确格式数据")));
      } else {
        //轨道
        if (this.globalRobotInfo.moveMotor == "1") {
          var pattern = /^\d+.?\d{0,2}$/;
          if (!pattern.test(value)) {
            callback(new Error(this.$t("小数点后最多只能输入两位")));
          } else {
            callback();
          }
        } else {
          // 轮式
          let oribrule = /^\d+$/;
          // 截取前两个并判断
          let start = value.slice(0, 2);
          let num = value.slice(2);
          if (start != "LM") {
            callback(new Error(this.$t("轮式地图停靠位置请以LM开头")));
          } else if (!oribrule.test(num)) {
            callback(new Error(this.$t("请输入正确的格式")));
          } else {
            callback();
          }
        }
      }
    };
    var objPass = (rule, value, callback) => {
      let arr = this.$refs.objTreeRef.getCheckedNodes();
      if (arr.length == 0 || !arr) {
        callback(new Error(this.$t("请选择巡检对象")));
      } else {
        callback();
      }
    };
    var pointPass = (rule, value, callback) => {
      let arr = this.$refs.pointTreeRef.getCheckedNodes();
      if (arr.length == 0 || !arr) {
        callback(new Error(this.$t("请选择巡检对象")));
      } else {
        callback();
      }
    };
    return {
      id: this.$route.query.id,
      sevePort: window.location.protocol + "//" + window.location.host,
      imgss: true,
      canvasImg: false,
      showTree: false, //巡检对象维度
      showPoint: false, //巡检点维度
      mapId: "",
      currentPointId: "",
      currentTab: "",
      currentTreeId: "", //树节点被点击高亮
      addParams: {
        name: "",
        viewType: "", //巡检类型
        overType: "", //结束动作
        dimension: "1", //巡检维度
        priority: "", //优先级
        patrolPathType: "", //巡检路径
        overStopPoint: "", //结束动作
      },
      // 优先级数据
      priorityList: [
        {
          value: "1",
          label: this.$t("一级"),
        },
        {
          value: "2",
          label: this.$t("二级"),
        },
        {
          value: "3",
          label: this.$t("三级"),
        },
        {
          value: "4",
          label: this.$t("四级"),
        },
        {
          value: "5",
          label: this.$t("五级"),
        },
      ],
      // 巡检对象tree
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "name",
      },
      pointDefaultProps: {
        children: "children",
        label: "name",
      },
      //巡检对象tree图标
      objIcons: {
        1: require("@/assets/images/objectData/rootobj.png"), //根节点
        2: require("@/assets/images/objectData/jiedianobj.png"), //节点
        3: require("@/assets/images/objectData/ptstobj.png"), //普通实体对象
        4: require("@/assets/images/objectData/ptxnobj.png"), //普通虚拟对象
        5: require("@/assets/images/objectData/hsstobj.png"), //红色实体对象
        6: require("@/assets/images/objectData/hsxnobj.png"), //红色虚拟对象
      },
      // 巡检点图标
      pointsIcons: {
        1: require("@/assets/images/objectData/root.png"), //根节点
        2: require("@/assets/images/objectData/pointjd.png"), //节点
        3: require("@/assets/images/objectData/ptst.png"), //普通实体对象
        4: require("@/assets/images/objectData/ptxn.png"), //普通虚拟对象
      },
      //巡检点数据
      pointsList: [],
      pointName: "", //巡检点名称
      deviceName: "", //设备名称
      deviceIdList: [], //选中的巡检对象数据
      pointIdList: [], //选中巡检点数据
      formRules: {
        overStopPoint: [
          { required: true, validator: stopPointOneValid, trigger: "blur" },
        ],
        name: [
          {
            required: true,
            message: this.$t("任务模板名称不能为空"),
            trigger: "blur",
          },
        ],
        viewType: [
          {
            required: true,
            message: this.$t("巡检类型不能为空"),
            trigger: "change",
          },
        ],
        overType: [
          {
            required: true,
            message: this.$t("结束动作不能为空"),
            trigger: "change",
          },
        ],
        dimension: [
          {
            required: true,
            message: this.$t("巡检维度不能为空"),
            trigger: "change",
          },
        ],
        priority: [
          {
            required: true,
            message: this.$t("优先级不能为空"),
            trigger: "change",
          },
        ],
        patrolPathType: [
          {
            required: true,
            message: this.$t("巡检路径不能为空"),
            trigger: "change",
          },
        ],
        objTreeList: [
          { required: true, validator: objPass, trigger: "change" },
        ],
        pointTreeList: [
          { required: true, validator: pointPass, trigger: "change" },
        ],
      },
      checkedObj: [], //巡检对象、巡检点循环数据
      nodeItem: {}, //巡检对象、巡检点数据项
      camereList: [], //可见光 标定集合
      thermalList: [], //红外 标定集合
    };
  },
  computed: {
    ...mapGetters(["globalRobotInfo"]),
  },
  async created() {
    await this.getPointsList();
    await this.getTreeselect();
    await this.getTemplateInfo(this.id);
  },
  mounted() {
    this.mapId = this.globalRobotInfo.map.uuid;
  },
  methods: {
    /**根据id查询模板信息 */
    getTemplateInfo(query) {
      API_templateInfo(query).then((res) => {
        if (res.code == 200) {
          this.addParams = res.data;
          //下拉框回显
          this.addParams.viewType = res.data.viewType + "";
          this.addParams.overType = res.data.overType + "";
          this.addParams.dimension = res.data.dimension + "";
          this.addParams.priority = res.data.priority + "";
          this.addParams.patrolPathType = res.data.patrolPathType + "";
          switch (res.data.dimension) {
            case "1":
              //巡检对象维度
              this.showTree = true;
              this.showPoint = false;
              //被选中数据
              let deviceList = [];
              deviceList = res.data.templateDeviceRealList.map((item) => {
                return {
                  treeId: item.deviceTreeId,
                };
              });
              console.warn("deviceList", deviceList);
              //选中树的排序
              this.checkedObj = [...deviceList];
              setTimeout(() => {
                this.$set(this, "checkedObj", [...deviceList]);
                this.$refs.objTreeRef.setCheckedNodes(deviceList);
              }, 500);

              // });
              break;
            case "2":
              // 巡检点维度
              this.showTree = false;
              this.showPoint = true;

              let ids = [];
              ids = res.data.templatePointRealList.map((item) => {
                return {
                  id: item.pointId,
                };
              });
              this.checkedObj = [...ids];
              setTimeout(() => {
                this.$refs.pointTreeRef.setCheckedNodes(ids);
              }, 500);
              break;
          }
        }
      });
    },
    /**树节点 勾选顺序 */
    sortCheckedChange(item, isChecked, type) {
      switch (type) {
        //巡检对象
        case "obj":
          //勾选顺序
          if (item.type !== "1") {
            if (isChecked == true) {
              let isBool = this.checkedObj.some((checkItem) => {
                return checkItem.treeId == item.treeId;
              });
              if (!isBool) {
                this.checkedObj.push({ treeId: item.treeId });
              }
            } else {
              this.checkedObj.forEach((listItem, listIndex) => {
                if (listItem.treeId == item.treeId) {
                  this.checkedObj.splice(listIndex, 1);
                }
              });
            }
          }

          break;
        //巡检点
        case "point":
          //勾选顺序
          if (item.type == "1") {
            if (isChecked == true) {
              let isBool = this.checkedObj.some((checkItem) => {
                return checkItem.id == item.id;
              });
              if (!isBool) {
                this.checkedObj.push({ id: item.id });
              }
            } else {
              this.checkedObj.forEach((listItem, listIndex) => {
                if (listItem.id == item.id) {
                  this.checkedObj.splice(listIndex, 1);
                }
              });
            }
          }
          break;
      }
    },

    // 巡检点click
    pointItemClick(point) {
      // 设置高亮
      if (this.currentPointId != point.pointId) {
        this.$set(this, "currentPointId", point.pointId);
      }
      // 设置可见光为默认值
      this.$set(this, "currentTab", "1");
    },
    async nodeClick(node, type) {
      //清除原本数组中的数据
      this.imgss = false;
      this.canvasImg = true;
      this.camereList = [];
      this.thermalList = [];
      this.currentTreeId = "";
      switch (type) {
        case "obj":
          if (node.type == "2") {
            this.nodeItem = await this.getNodeInfo({ deviceId: node.treeId });
            //设置可见光高亮
            this.$set(this, "currentTab", "1");
            this.currentTreeId = node.treeId;
          } else {
            this.$message.info(this.$t("请选择巡检对象查看可见光与红外"));
            return;
          }
          break;
        case "point":
          if (node.type == "1") {
            this.nodeItem = await this.getNodeInfo({ pointId: node.id });
            // 设置可见光高亮
            this.$set(this, "currentTab", "1");
            this.currentTreeId = node.id;
          } else {
            this.$message.info(this.$t("请选择巡检点查看可见光与红外"));
            return;
          }
          break;
      }
      this.pointName = this.nodeItem.pointName;
      this.deviceName = this.nodeItem.deviceName;
      //可见光
      let cameroUrl = this.sevePort + this.nodeItem.cameraUrl;
      //点集合
      this.nodeItem.deviceList.forEach((listItem) => {
        eval(listItem.auxiliaryBox).filter((pointItem) => {
          if (pointItem.device_type == 0) {
            this.camereList.push(pointItem.device_bBox);
          } else {
            this.thermalList.push(pointItem.device_bBox);
          }
        });
      });
      this.tabClick("1");
      //标定多边形
      this.selectArea(cameroUrl, this.camereList);
    },
    /** tab点击 */
    tabClick(type) {
      switch (type) {
        case "1":
          this.$set(this, "currentTab", "1");
          //图片
          let cameroUrl = this.sevePort + this.nodeItem.cameraUrl;
          //标定多边形
          this.selectArea(cameroUrl, this.camereList);
          break;
        case "2":
          this.$set(this, "currentTab", "2");
          //图片
          let redUrl = this.sevePort + this.nodeItem.thermalUrl;
          //标定多边形
          this.selectArea(redUrl, this.thermalList);
          break;
      }
    },
    /**巡检路径 change */
    patrolPathTypeChange(val) {
      this.checkedObj = []; //清空已选节点排序数组
      if (this.addParams.dimension == "1") {
        setTimeout(() => {
          this.$refs.objTreeRef.setCheckedNodes([]);
        }, 500);
      } else {
        setTimeout(() => {
          this.$refs.pointTreeRef.setCheckedNodes([]);
        }, 500);
        this.$nextTick(() => {
          this.getPointsList();
        });
      }
    },
    /** 查询巡检对象树结构 */
    getTreeselect() {
      API_treeOption().then((res) => {
        if (res.code == "200") {
          this.deptOptions = res.deviceTrees;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**巡检点列表 */
    getPointsList() {
      API_pointsList().then((res) => {
        if (res.code == 200) {
          this.pointsList = res.data;
        } else {
          this.$message.info(res.msg);
        }
      });
    },
    /**获取巡检对象、巡检点信息 */
    getNodeInfo(query) {
      return new Promise((resolve, reject) => {
        API_getImgUrl(query).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
    },
    /**确定 btn */
    submitBtn() {
      this.$refs.addRef.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          // 巡检对象 数据
          let type = this.addParams.dimension;
          switch (type) {
            case "1":
              this.deviceIdList = this.checkedObj.map((item) => item.treeId);
              break;
            case "2":
              this.pointIdList = this.checkedObj.map((item) => item.id);
              break;
          }
          let params = {
            ...this.addParams,
            deviceIdList: this.deviceIdList,
            pointIdList: this.pointIdList,
            mapId: this.mapId,
          };
          API_editTemplate(params)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success(this.$t("编辑任务模板成功"));
                this.$router.go(-1);
              }
            })
            .finally(() => {
              loading.close();
            });
        }
      });
    },
    /**取消 btn */
    cancleBtn() {
      this.$router.go(-1);
    },
    /**获取本地时间： */
    insertTempName() {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth();
      month = month + 1;
      var date = now.getDate();
      var hours = now.getHours();
      var minuts = now.getMinutes();
      var seconds = now.getSeconds();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      var time =
        year.toString() +
        month.toString() +
        date.toString() +
        hours.toString() +
        minuts.toString() +
        seconds.toString();
      return time;
    },
    /**巡检维度 change */
    treeNodeChange(val) {
      this.currentTreeId = "";
      switch (val) {
        case "1":
          this.showTree = true;
          this.showPoint = false;
          this.checkedObj = [];
          this.$refs.pointTreeRef.setCheckedNodes([]);
          break;
        case "2":
          this.showTree = false;
          this.showPoint = true;
          this.checkedObj = [];
          this.$refs.objTreeRef.setCheckedNodes([]);
          break;
      }
    },
    /**画图形 */
    selectArea(imgSrc, sceneBox) {
      let ths = this;
      let canvas = this.$refs.canvasImg;
      let ctx = canvas.getContext("2d");
      let img = new Image();
      img.src = imgSrc;
      // img.width = 480;
      img.width = 636;
      img.height = 356;
      let [width, height] = [img.width, img.height];
      canvas.width = width;
      canvas.height = height;
      //显示图片
      img.onload = function () {
        ctx.drawImage(img, 0, 0, width, height);
        ths.initCanvas(sceneBox);
      };
    },
    /**canvas 画线 */
    initCanvas(sceneBox) {
      this.$nextTick(() => {
        let canvas = this.$refs.canvasImg;
        let ctx = canvas.getContext("2d");
        //画线
        sceneBox.forEach((boxList) => {
          // return;
          ctx.beginPath();
          let pointsArr = [];
          pointsArr = eval(boxList).map((item) => {
            return { x: item[0], y: item[1] };
          });
          pointsArr.forEach((item) => {
            ctx.lineTo(item.x, item.y);
          });
          ctx.closePath();
          ctx.lineCap = "round";
          ctx.lineJoin = "round";
          ctx.strokeStyle = "red";
          ctx.lineWidth = 3;
          ctx.closePath();
          ctx.stroke();
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.title-common {
  position: relative;
  font-size: 18px;
  font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
  font-weight: normal;
  color: #00d1ff;
  line-height: 30px;
  .radiu {
    position: absolute;
    top: 12px;
    left: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 209, 255, 0.2);
  }
}
.base-info,
.inspect-info,
.save-template,
.fixed-point {
  width: 100%;
  color: #fff;
  padding: 24px 24px 12px;
  box-sizing: border-box;
  border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
}
// 基本信息
.base-info {
  height: 106px;
}
// 巡检信息
.inspect-info {
  height: 99px;
}
//保存为模板
.save-template {
  height: 99px;
}
//定点巡检
.fixed-point {
  // height: 576px;
  border-bottom: 0;
  padding: 0;
  .tree {
    height: 99%;
    padding: 18px 24px 12px !important;
    box-sizing: border-box;
    border-right: 1px dashed rgba(219, 255, 251, 0.2);
  }
  .obj-text {
    width: 95%;
    // height: 67px;
    margin-left: 10px;
    padding: 8px;
    box-sizing: border-box;
    text-align: left;
    background-color: rgba(255, 173, 48, 0.06);
    font-size: 11px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffad30;
    line-height: 17px;
  }
}
// 可见光
.tabs {
  position: relative;
  padding: 24px 54px;
  box-sizing: border-box;
  .img {
    display: flex;
    width: 869px;
    height: 376px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);

    img {
      width: 640px;
      height: 360px;
    }
    .info {
      padding: 0 10px;
      box-sizing: border-box;
      div:nth-child(2) {
        margin: 15px 0;
      }
    }
  }
  .current-img {
    border: 1px solid rgba(0, 209, 255, 1);
  }
  .hot,
  .camero {
    position: absolute;
    width: 40px;
    height: 96px;
    // 字体水平居中
    padding-left: 8px;
    box-sizing: border-box;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px 0px 0px 8px;
    color: #fff;
  }
  .camero {
    top: 24px;
    left: 14px;
  }
  .hot {
    top: 140px;
    left: 13px;
  }
  .current-tab {
    background-color: rgba(0, 209, 255, 0.2);
    border: 1px solid rgba(0, 209, 255, 1);
    border-right: 0;
  }
}
.lists {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  .point {
    width: 40px;
  }
}
.current-item {
  width: 100%;
  background-color: rgba(0, 209, 255, 0.1);
  .point {
    display: flex;
    justify-content: center;
    span {
      display: flex;
      width: 4px;
      height: 4px;
      background-color: #00d1ff;
      border-radius: 50%;
    }
  }
}
//底部
.footer {
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
.imgs-preview {
  position: relative;
  padding: 18px 24px 12px !important;
  box-sizing: border-box;
  span {
    position: absolute;
    top: 18px;
    left: 400px;
    font-size: 14px;
  }
}
.scroll-hidden {
  min-width: 518px;
  height: 365px;
  overflow: auto;
}
.scroll-hidden::-webkit-scrollbar {
  // display: none;
}
::v-deep {
  .el-form-item__label {
    font-size: 15px !important;
  }
}
// 巡检点维度二级节点不展示复选框
::v-deep {
  .point-tree .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: none;
    }
    .point-tree .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
  }
}
::v-deep {
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }
}
</style>
